<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #box {
            height: 100px;
            width: 600px;
            border: 1px solid #f00;
        }

        #ul {
            overflow: hidden;
            border: 2px solid #f00;
            padding: 10px;
            width: 600px;
        }

        li {
            float: left;
            padding: 5px;
            color: #666666;
            cursor: pointer;
            margin: 5px 10px;
            border: 2px solid transparent;
            list-style-type: none;
        }

        .active {
            border: 2px solid #f00;
        }
    </style>
</head>

<body>
    <div id="box">

    </div>
    <ul id="ul">
        <li>北京市</li>
        <li>包头市</li>
        <li>鞍山市</li>
        <li>安康市</li>
        <li>安阳市</li>
        <li>安庆市</li>
        <li>阿里地区</li>
        <li>阿克苏地区</li>
        <li>蚌埠市</li>
        <li>亳州市</li>
        <li>佛州市</li>
    </ul>
    <script>
        var lis = [...document.querySelectorAll("#ul li")]
        var box = document.querySelector("#box")


        box.onclick = function (e) {
            if (e.target.nodeName === "LI") {
                e.target.parentNode.removeChild(e.target)
                var i = e.target.getAttribute("ind")
                lis[i].classList.remove("active")
            }
        }

        lis.forEach(function (item, index) {
            item.onclick = function () {
                if (item.classList.contains("active")) {
                    item.classList.remove("active");
                    [...box.querySelectorAll("li")].forEach(function (item) {
                        if (item.getAttribute("ind") == index) {
                            item.parentNode.removeChild(item)
                        }
                    })

                } else {
                    item.classList.add("active")
                    var el = item.cloneNode(true)
                    el.classList.remove("active")
                    el.setAttribute("ind", index)
                    box.appendChild(el)
                }

            }
        })



    </script>
</body>

</html>